<template>
  <el-dialog
    :title="title"
    :visible.sync="isVisible"
    :width="width"
    :before-close="handleClose"
    :lock-scroll="true"
    :close-on-click-modal="false"
    custom-class="pub_dialog"
  >
    <div style="margin-bottom: 15px">
      <div class="tabs-root" v-if="openType=='detail'">
        <div class="my-tabs">
          <el-tabs class="tabs-main" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="(item,index) in tabsData" :key="index" :label="item.label" :name="item.label">
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <urgeInfo
        :dialogVisible = dialogVisible
        :superviseOrderNum = superviseOrderNum
        v-if="activeName=='督办信息' && openType=='detail'"
      ></urgeInfo>
      <detailInfo
        v-else
        :id=id
        :dialogVisible = dialogVisible
        :curDisposeStatus="curDisposeStatus"
         ref="detail"
        :openType=openType
        @success="success"
        @close="close"
      ></detailInfo>
    </div>
  </el-dialog>
</template>

<script>
  import detailInfo from './detailInfo.vue'
  import urgeInfo from '@/views/xy/common/urgeInfo'

  export default {
    components: {
      detailInfo, urgeInfo
    },
    props: {
      width: {
        type: String,
        default: "70%",
      },
      title: {
        type: String,
        default: "详情",
      },
      id: {},
      openType: {
        type: String,
        default: "add"
      },
      dialogVisible: {
        type: Boolean,
        default: false
      },
      superviseOrderNum: {
        type: String,
        default: ""
      },
      curDisposeStatus:{}
    },
    watch: {
      'width': {
        handler(newVal, oldVal) {
          console.log('newVal===', newVal, oldVal)
          let w = this.width.split('%')[0]
          if (w >= 60) {
            this.rowspan = 2
          } else {
            this.rowspan = 1
          }
        },
        deep: true,
        immediate: true
      },
    },
    computed: {
      isVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
        }
      }
    },
    data() {
      return {
        activeName: "基本信息",
        tabsData: [
          {label: '基本信息'},
          {label: '督办信息'},
        ]
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log("切换====》",tab, event);
        this.activeComponents = this.tabsData[tab.index].label;
      },
      cancel(){
        this.close()
      },
      handleClose(done) {

        this.close()
      },
      success(){
        this.$emit('success')
      },
      close(){
        if(this.activeName!="督办信息"){
          this.$refs.detail.close(1);
        }
        this.$emit('close')
      },
    }
  };
</script>

<style lang="scss" scoped>
  .tabs-root {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px ;
    .my-tabs{
      background-color: transparent;
      flex-shrink: 0;
      .tabs-main:first-child{
        padding: 0 10px 0 0;
      }
      .tabs-main:{
        padding: 0 10px;
      }
    }
    ::v-deep .el-tabs__nav{
      // padding: 0 20px;
    }
    ::v-deep .el-tabs__header{
      margin: 0;
      background-color: white;
      padding-left: 0px !important;
    }
    ::v-deep .el-tabs__item{
      height: 46px;
      line-height: 46px;
    }
  }
  ::v-deep .el-dialog__body{
    padding: 0 20rem;
  }
</style>
